<template>
  <div class="teacher-section">
    <h2 class="section-title">核心团队</h2>
    <p class="section-subtitle">RESEARCHERS</p>
    <div class="teacher-cards">
      <div class="teacher-card" v-for="(teacher, index) in teachers" :key="index">
        <img :src="teacher.avatar" alt="教师头像" class="teacher-avatar" />
        <h3 class="teacher-name">{{ teacher.name }}</h3>
        <p class="teacher-title">{{ teacher.title }}</p>
        <!-- <p class="teacher-email">
          <svg class="email-icon" viewBox="0 0 1024 1024" width="20" height="20">
            <path
              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 110.8L553.1 512 888 753.2V270.8zM96 253.2 430.9 512 96 753.2V253.2z m42.8 529.1L473.8 512 138.8 241.9h746.3L550.2 512l335 270.1H138.8z"
              fill="#ffffff"
            ></path>
          </svg>
          {{ teacher.email }}
        </p> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeacherCards',
  data() {
    return {
      teachers: [
        {
          name: '张鹏',
          title: '实验室主任',
          // email: 'wind82465@yeah.net',
          avatar: require('@/assets/img/zhangpeng.png')
        },
        {
          name: '董克',
          title: '人工智能专家',
          // email: 'dongke@china213.net',
          avatar: require('@/assets/img/dongke.jpg')
        },
        {
          name: '赵新蕾',
          title: '学术负责人',
          // email: '782049502@qq.com',
          avatar: require('@/assets/img/zhaoxinlei.jpg')
        },
        {
          name: '李志超',
          title: '系统架构师',
          // email: 'lizhichao@china213.net',
          avatar: require('@/assets/img/lizhichao.png')
        },
        {
          name: '董力嘉',
          title: '算法架构师',
          // email: '1134632781@qq.com',
          avatar: require('@/assets/img/donglijia.jpg')
        },
      ]
    };
  }
};
</script>

<style scoped>
.teacher-section {
  text-align: center;
  padding: 20px;
  /* background-image: url("@/assets/img/background4.jpg"); */
  background-size: cover;
  margin-bottom: 20px;
}

.section-title {
  font-size: 32px;
  margin-bottom: 10px;
  color: black;
}

.section-subtitle {
  font-size: 14px;
  color: black;
  margin-bottom: 30px;
}

.teacher-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.teacher-card {
  width: 200px;
  background-image: url("@/assets/img/background.jpg");
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.teacher-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}

.teacher-avatar {
  width: 140px;
  height: 140px;
  border-radius: 65px;
  margin-bottom: 15px;
  object-fit: cover;
}

.teacher-name {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.teacher-title {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

.teacher-email {
  font-size: 13px;
  color: #fff;
}

.email-icon {
  margin-right: 5px;
  vertical-align: middle;
  fill: #ffffff;
}
</style>